<template>
  <ul>
    <li v-for="i in getlist3" :key="i.id">
      <div>
        <span>用户账户：</span>
        <el-input v-model="i.username" style="width: 240px" placeholder="请输入账户" />
      </div>
      <div>
        <span>用户密码：</span>
        <el-input v-model="i.password" style="width: 240px" placeholder="请输入密码" />
      </div>
      <el-switch v-model="i.disabled" inactive-text="是否公开" />
      <div>
        <el-button type="primary" @click="xiugai3(i.id)">修改</el-button>
        <el-button type="warning" @click="delete3(i.id)">删除</el-button>
      </div>
    </li>
  </ul>
  <el-dialog v-model="dialogFormVisible" title="用户发布" width="500">
    <el-form :model="form">
      <el-form-item label="用户账户：" :label-width="formLabelWidth">
        <el-input v-model="username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户密码：" :label-width="formLabelWidth">
        <el-input v-model="password" autocomplete="off" />
      </el-form-item>
      <el-switch v-model="disabled" inactive-text="是否公开" />
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="xiugai4()">修改</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { YonghuDeleteRequset, YonghulistRequset, YonghuPatchRequset } from '@/api/user';
import { ref ,reactive} from 'vue'
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const pid = ref()
const username = ref('')
const password = ref("")
const disabled = ref(false);
const getlist3 = ref([
  { username: '', password: '', disabled: false,id:'' }
])
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
// const getlist4 = ref({username: '', password: '', disabled: false,pid:number})
//用户列表
async function list3() {
  const res = await YonghulistRequset()
  getlist3.value = res.data
  console.log(res);
}
list3()
//修改用户
function xiugai3(id: number) {
  dialogFormVisible.value = true
  pid.value = id
  console.log(pid);
  // getlist4.value = {...getlist3}
}
async function xiugai4() {
  await YonghuPatchRequset(username.value,password.value,disabled.value,pid.value)
  .then((res) => {
    if (res.status == 200) {
      alert('修改成功')
      list3();
      console.log(res);
      dialogFormVisible.value = false
      username.value = ''
      password.value = ''
      disabled.value = false
    }

  })
}

//删除用户
async function delete3(id: number) {
  await YonghuDeleteRequset(id).then((res) => {
    console.log(res);
    list3();
  })
}




</script>
<style lang="css" scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

li {
  width: 100%;
  height: 100%;
  border-bottom: #6b778c 1px solid;
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
